<template>
	<view class="content">
		<view class="header-section">
			<SearchInput class="search" v-model:inputVal="searchValue" placeholderTip="请输入查找的实验室名称" @search="search">
			</SearchInput>
			<compHead :user="user"></compHead>
		</view>
		<compMidCard class="comp-mid-card" @reservation="checkLoginAndGo('reservation')" @goMy="checkLoginAndGo('my')"
			@goHistory="checkLoginAndGo('history')" @goRecommend="checkLoginAndGo('recommend')"
			style="transform: translateY(-20px)"></compMidCard>
		<compMidTabs class="comp-mid-tabs"></compMidTabs>
		<compList class="comp-list" @login="login"></compList>
	</view>

	<uv-toast ref="toast"></uv-toast>

	<!-- 背景动画元素 -->
	<view class="circle circle-1"></view>
	<view class="circle circle-2"></view>
	<view class="circle circle-3"></view>

	<!-- 添加悬浮球组件 -->
	<float-ball :imgSrc="showFloatBall ? '/static/img/last-wel.gif' : '/static/img/right-wel.gif'"
		:size="60"></float-ball>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import SearchInput from '@/components/SearchInput.vue'
import compHead from './comps/comp-head.vue'
import compMidCard from './comps/comp-mid-card.vue'
import compMidTabs from './comps/comp-mid-tabs.vue'
import compList from './comps/comp-list.vue'
import db from '@/api/database'
import FloatBall from '@/components/float-ball/float-ball.vue'

// 搜索框输入
const searchValue = ref('')

const user = ref(uni.getStorageSync('user'))
const showFloatBall = ref(false)

onShow(() => {
	user.value = uni.getStorageSync('user')
	setTimeout(() => {
		showFloatBall.value = true
	}, 6570)
})

// 检查登录状态并跳转
function checkLoginAndGo(type: string) {
	if (!user.value) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		})
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}, 500)
		return
	}

	switch (type) {
		case 'reservation':
			uni.navigateTo({
				url: '/pages/reservation/reservation'
			})
			break
		case 'my':
			uni.navigateTo({
				url: '/pages/userInfo/userInfo'
			})
			break
		case 'history':
			uni.navigateTo({
				url: '/pages/reservationHistory/reservationHistory'
			})
			break
		case 'recommend':
			uni.navigateTo({
				url: '/pages/chat/chat'
				// url: '/pages/chat/chat?type=recommend'
			})
			break
	}
}

function reservation() {
	checkLoginAndGo('reservation')
}

function goMy() {
	checkLoginAndGo('my')
}

function login() {
	uni.navigateTo({
		url: '/pages/login/login'
	})
}

function goHistory() {
	checkLoginAndGo('history')
}

function search() {
	uni.navigateTo({
		url: '/pages/reservation/reservation?searchValue=' + searchValue.value
	})
}


</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

/* 关键帧动画定义 */
@keyframes float {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-20px);
	}

	100% {
		transform: translateY(0px);
	}
}

@keyframes pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}

	50% {
		transform: scale(1.05);
		opacity: 0.6;
	}

	100% {
		transform: scale(1);
		opacity: 0.8;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0.5;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideUp {
	0% {
		opacity: 0.5;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.content {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background: linear-gradient(135deg, #ffffff 0%, #eceef0 100%);
	position: relative;
	overflow: hidden;
	// animation: fadeIn 0.8s ease-out;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;

	.header-section {
		width: 100%;
		background: linear-gradient(135deg, #22c4ff, #2196f3);
		border-bottom-right-radius: 15px;
		border-bottom-left-radius: 15px;
		box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
		padding-bottom: 10px;
		z-index: 0;
		margin-bottom: -40px;
	}

	:deep(.comp-mid-card),
	:deep(.comp-mid-tabs) {
		animation: slideUp 0.8s ease-out forwards;
		margin-bottom: 10px;
		position: relative;
	}

	:deep(.comp-list) {
		flex: 1;
		width: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);
	}

}

/* 背景动画圆圈 */
.circle {
	position: absolute;
	border-radius: 50%;
	background: linear-gradient(45deg, rgba(34, 196, 255, 0.2), rgba(33, 150, 243, 0.2));
	filter: blur(5px);
	z-index: 1;
}

.circle-1 {
	width: 500rpx;
	height: 500rpx;
	top: -150rpx;
	right: -100rpx;
	animation: pulse 8s infinite ease-in-out;
}

.circle-2 {
	width: 350rpx;
	height: 350rpx;
	bottom: 100rpx;
	left: -100rpx;
	animation: pulse 6s infinite ease-in-out 1s;
}

.circle-3 {
	width: 600rpx;
	height: 600rpx;
	bottom: -300rpx;
	right: 30%;
	animation: pulse 10s infinite ease-in-out 2s;
}
</style>